<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <%@include file="../../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <style type="text/css">
        .no-fix .section-main {
            min-width: 0px !important;
            max-width: 1200px !important;
            padding: 0px !important;
        }

        .icon-close-new {
            width: 18px;
            height: 18px;
            background-image: url('${ctx}/image/form/create_bg.32.png');
            background-position: -522px 0px;
            position: absolute;
            top: -6px;
            right: -9px;
            cursor: pointer;
        }

        .tag-wrap {
            border: 1px solid #f1eeec;
            min-height: 100px;
            margin-top: 10px;
            padding: 5px;
        }

        .tag-wrap .tag-item {
            float: left;
            margin: 5px 10px 5px 5px;
            padding: 10px;
            background: #fff0f3;
            position: relative;
        }

        .tag-wrap .tag-name {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
        }

        .tag-wrap .tag-item.active {
            color: #fff;
            background: #f4615c;
        }

        .tag-wrap:after {
            clear: both;
            content: '';
            display: block;
        }
    </style>
</head>
<body>
<div class="index-outside">
    <!--内容-->
    <section class="no-fix">
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post">
                    <input type="hidden" name="memberId" value="${memberId}"/>
                    <input type="hidden" name="partnerId" value="${partnerId}"/>
                    <input type="hidden" name="type" value="MATERIAL"/>
                    <input type="hidden" name="targetIds" value=""/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">是否全部<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <input type="radio" name="isShowAll" value="1" lay-filter="isShowAll"
                                       lay-verify="isShowAll"
                                       title="全部素材" ${isShowAll == 1 ? 'checked="checked"' : ''} />
                                <input type="radio" name="isShowAll" value="0" lay-filter="isShowAll"
                                       lay-verify="isShowAll"
                                       title="部分素材" ${isShowAll == 0 ? 'checked="checked"' : ''} />
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item selectedMember dn">
                        <div class="layui-inline">
                            <label class="layui-form-label">&emsp;&emsp;</label>
                            <div class="layui-input-block">
                                <a href="javascript:txz.selectMaterialUtil.selectMember();"
                                   class="layui-btn layui-btn-danger">选择素材</a>
                                <div class="tag-wrap"
                                     style="max-width: 900px; min-width: 500px; min-height: 300px"></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
<script>
    var selectMemberHtml = '';
    var form = null;
    $(function () {
        layui.use(['form'], function () {
            form = layui.form;

            form.on('radio(isShowAll)', function (data) {
                if (data.value == 0) {
                    // 部分合作商
                    txz.selectMaterialUtil.getMemberData('${memberId}', '${partnerId}', 'MATERIAL', 0)
                } else {
                    // 全部合作商
                    $(".selectedMember").find('.tag-wrap').html('');
                    $(".selectedMember").addClass("dn");
                }
            });

            if ('${isShowAll}' == '0') {
                txz.selectMaterialUtil.getMemberData('${memberId}', '${partnerId}', 'MATERIAL', 0)
            }
        });

        txz.selectMaterialUtil = {
            /**
             * 选择合作商
             */
            selectMember: function () {
                openMemberDialog('选择素材', '${ctx}/memberGroup/Permission/selectMaterial.do?member=${partnerId}', '730px', '600px');

                function openMemberDialog(title, url, width, height, target) {
                    parent.layer.open({
                        type: 2,
                        area: [width, height],
                        title: title,
                        maxmin: true, //开启最大化最小化按钮
                        content: url,
                        btn: ['确定', '关闭'],
                        yes: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            var inputForm = body.find('#inputForm');
                            var top_iframe;
                            if (target) {
                                top_iframe = target;//如果指定了iframe，则在改frame中跳转
                            } else {
                                top_iframe = '_parent';//获取当前active的tab的iframe
                            }
                            inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示

                            if (iframeWin.contentWindow.doSubmit()) {
                                var datas = iframeWin.contentWindow.returnData();
                                var _contentArray = new Array();
                                for (var i = 0; i < datas.length; i++) {
                                    var flag = true;
                                    $('.selectedMember .tag-wrap').find(".tag-item").each(function (index, ele) {
                                        var itemId = $(ele).data('id');
                                        if (datas[i].id === itemId) {
                                            util.layerMsgError(datas[i].name + '   已存在');
                                            flag = false;
                                        }
                                    })
                                    if (flag) {
                                        _contentArray.push('<div class="tag-item" data-id="' + datas[i].id + '">');
                                        _contentArray.push('<span class="tag-name">' + datas[i].name + '</span>');
                                        _contentArray.push('<span name="event_form_item_ctrl" class="icon-close-new"></span>');
                                        _contentArray.push('</div>');
                                    }
                                    if (!flag) {
                                        return flag;
                                    }
                                }
                                var $content = $('.selectedMember .tag-wrap');
                                $content.append(_contentArray.join(""));

                                setTimeout(function () {
                                    top.layer.close(index);
                                }, 100);//延时0.1秒，对应360 7.1版本bug
                            }

                        },
                        cancel: function (index) {
                        }
                    });
                }
            },
            /**
             * @param memberId 用户id
             * @param partnerId 机构id
             * @param type 类型
             * @param isShowAll 是否查看全部
             **/
            getMemberData: function (memberId, partnerId, type, isShowAll) {
                if (isShowAll == 0) {
                    $.post("${ctx}/memberGroup/Permission/dataList.do", {
                        memberId: memberId,
                        partnerId: partnerId,
                        type: type
                    }, function (res) {
                        var _contentArray = new Array();
                        for (var i = 0; i < res.data.length; i++) {
                            _contentArray.push('<div class="tag-item" data-id="' + res.data[i].id + '">');
                            _contentArray.push('<span class="tag-name">' + res.data[i].title + '</span>');
                            _contentArray.push('<span name="event_form_item_ctrl" class="icon-close-new"></span>');
                            _contentArray.push('</div>');
                        }
                        $(".selectedMember .tag-wrap").html(_contentArray.join(""));

                        selectMemberHtml = $(".selectedMember .tag-wrap").html();

                        if (isShowAll == 0) {
                            $(".selectedMember").removeClass("dn");
                        } else {
                            $(".selectedMember").addClass("dn");
                        }

                        $("[name=isShowAll][value=" + isShowAll + "]").prop('checked', true);

                        form.render('radio');
                    })
                } else {
                    $(".selectedMember .tag-wrap").html(selectMemberHtml);

                    if (isShowAll == 0) {
                        $(".selectedMember").removeClass("dn");
                    } else {
                        $(".selectedMember").addClass("dn");
                    }

                    $("[name=isPushAllNew][value=" + isShowAll + "]").prop('checked', true);

                    form.render('radio');
                }
            },
            addEvent: function () {
                $(".tag-wrap").delegate(".icon-close-new", 'click', function (e) {
                    var $target = $(e.target);
                    $target.closest(".tag-item").remove();
                    selectMemberHtml = $(".selectedMember .tag-wrap").html();
                })
            }
        };
        txz.selectMaterialUtil.addEvent();
    });

    function doSubmit() {
        var isShowAll = $('[name=isShowAll]:checked').val();
        if (!isShowAll) {
            util.layerMsgError('请选择素材');
            return false;
        }

        var flag = false;
        var _array = new Array();
        $(".selectedMember .tag-wrap").find('.tag-item').each(function (index, ele) {
            _array.push($(ele).data('id'));
        });
        $("[name=targetIds]").val(_array.join(','));

        if (parseInt(isShowAll) === 0 && _array.length == 0) {
            util.layerMsgError('请选择素材');
            return false;
        }

        //loading层
        var loadIndex = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        $.ajax({
            url: '${ctx}/memberGroup/Permission/save.do',
            type: "POST",
            dataType: "JSON",
            async: false,
            data: $('#myForm').serialize(),
            success: function (res) {
                top.layer.close(loadIndex);
                if (res.success) {
                    util.layerMsgSuccess("保存成功");
                } else {
                    util.layerMsgError('保存失败');
                }
                flag = res.success;
            }
        });
        return flag
    }
</script>
</body>
</html>